<template>
  <a-spin tip="加载中..." :spinning="spinning" size="large">
    <div class="body">
      <div class="login">
        <h2>文学客栈后台</h2>
        <div class="login_box">
          <input type="text" required="required" v-model="admin.name" /><label
            >真实姓名</label
          >
        </div>
        <div class="login_box">
          <input type="text" required="required" v-model="admin.phone" /><label
            >手机号</label
          >
        </div>
        <a href="javascript:void(0)" @click="doLogin">
          登录
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </a>
      </div>
    </div>
  </a-spin>
</template>


<script setup>
import "@/assets/login.css";
import { ref, onMounted } from "vue";
import router from "@/router";
import { useAdminStore } from "@/stores/admin";
import { useAuthorizationStore } from "@/stores/authorization";
import { login } from "@/api/login";
import { message } from "ant-design-vue";

const spinning = ref(true);
onMounted(() => {
  setInterval(() => {
    spinning.value = false;
  }, 1000);
});

const admin = ref({
  name: "",
  phone: ""
});

const adminStore = useAdminStore();
const authorizationStore = useAuthorizationStore();
function doLogin() {
  if (
    admin.value.name != "" &&
    admin.value.phone != ""
  ) {
    login(admin.value).then((res) => {
      if (res.code == 200 && res.data != null) {
        // 登录成功
        adminStore.setAdmin(res.data.user);
        authorizationStore.setAuthorization(res.data.authorization);
        // 跳转到首页
        router.push("/");
        message.success("欢迎 " + adminStore.admin.name + "  "+ "回来 ！");
      }
    });
  } else {
    message.error("请填写完整信息！");
  }
}
</script>